import type { CSSProperties } from 'react';
import { redirect } from 'next/navigation';
import { FunnelFlow } from '@/components/FunnelFlow';
import {
  defaultFunnelStepId,
  funnelStepSequence,
  getPathForStep,
  isFunnelStepId,
} from '@/runtime/funnel-runtime';

type StepPageProps = {
  params: Promise<{
    stepId: string;
  }>;
  searchParams?: Promise<{
    previewFrame?: string | string[];
    previewStepLock?: string | string[];
    previewThumbnail?: string | string[];
  }>;
};

export const dynamic = 'force-static';

export function generateStaticParams() {
  return funnelStepSequence.map((stepId) => ({ stepId }));
}

export default async function StepPage({ params, searchParams }: StepPageProps) {
  const { stepId } = await params;
  const resolvedSearchParams = (await searchParams) || {};
  const previewFrameParam = resolvedSearchParams.previewFrame;
  const previewStepLockParam = resolvedSearchParams.previewStepLock;
  const previewThumbnailParam = resolvedSearchParams.previewThumbnail;
  const isPreviewFrame = Array.isArray(previewFrameParam) ? previewFrameParam.includes('1') : previewFrameParam === '1';
  const isPreviewStepLock = Array.isArray(previewStepLockParam)
    ? previewStepLockParam.includes('1')
    : previewStepLockParam === '1';
  const isPreviewThumbnail = Array.isArray(previewThumbnailParam)
    ? previewThumbnailParam.includes('1')
    : previewThumbnailParam === '1';

  if (!isFunnelStepId(stepId)) {
    redirect(getPathForStep(defaultFunnelStepId));
  }

  const pageStyle: CSSProperties = isPreviewFrame
    ? {
        justifyContent: 'flex-start',
      }
    : {};

  return (
    <main className="page-root" style={pageStyle}>
      <FunnelFlow
        initialStepId={stepId}
        lockToInitialStep={isPreviewStepLock}
        isPreviewFrame={isPreviewFrame}
        isPreviewThumbnail={isPreviewThumbnail}
      />
    </main>
  );
}